{/* Copyright 2020 Adobe. All rights reserved.
This file is licensed to you under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy
of the License at http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License. */}

import {Layout} from '@react-spectrum/docs';
export default Layout;

import docs from 'docs:@react-spectrum/view';
import {HeaderInfo, PropTable, PageDescription} from '@react-spectrum/docs';
import packageData from '@react-spectrum/view/package.json';

```jsx import
import {View} from '@react-spectrum/view';
import {TextField} from '@react-spectrum/textfield';
```

---
category: Content
---

# View

<PageDescription>{docs.exports.View.description}</PageDescription>

<HeaderInfo
  packageData={packageData}
  componentNames={['View']}
  since="3.0.0" />

## Introduction

The `View` component can be used as a general purpose container element, similar to a
`div`. It supports Spectrum style props, which enable you to use Spectrum variables for
styling to ensure consistency with other Spectrum components. In addition, Spectrum
variables automatically adapt to color scheme changes (e.g. dark mode), and platform
scale (e.g. touch vs. mouse input). See [Styling](styling.html) to learn more.

## Example

The following example shows how you might build a container element using Spectrum defined
variables for the border and padding. Use the color scheme and scale pickers to see how the
view changes automatically based on these variables.

```tsx example themeSwitcher=true
<View
  borderWidth="thin"
  borderColor="dark"
  borderRadius="medium"
  padding="size-250">
  <TextField label="Name" />
</View>
```

## Props

<PropTable component={docs.exports.View} links={docs.links} />
